import React from "react";
import Footer from "../common/Footer";

const Index = () => {
  // 上拉加载状态
  const [finished, setFinished] = React.useState(false);
  const [recommendData, setRecommendData] = React.useState([]);
  const [list, setList] = React.useState([]);
  const [listCount, setListCount] = React.useState(0);
  const [page, setPage] = React.useState(1);
  const [limit, setLimit] = React.useState(10);

  // 下拉刷新
  const onRefresh = () => {
    setFinished(false);

    return new Promise((resolve, reject) => {
      setTimeout(async () => {
        await onLoadRefresh(true);

        resolve(true);
      }, 1500);
    });
  };

  // 上拉加载
  const onLoadRefresh = (isRefresh) => {
    setFinished(true);
    getCategoryData(isRefresh);
  };

  const getCategoryData = async (isRefresh) => {
    let data = {
      page: isRefresh === true ? 1 : page,
      limit,
    };

    let result = await React.Http.POST({
      url: "category/index",
      params: data,
    });

    if (result) {
      if (result.code === 0) {
        React.Vant.Toast.info(result.msg);
        setFinished(true);
        return;
      }

      let count = result.data.count;
      setListCount(count);

      if (isRefresh) {
        React.Vant.Toast.info("刷新成功");
        list.length = 0;
      }

      setList((v) => {
        const newList = isRefresh === true ? [] : [...v, ...result.data.list];

        return newList;
      });

      if (list.length >= count) {
        setFinished(true);
        return;
      }

      let Page = isRefresh === true ? 1 : page + 1;

      setPage(Page);
      setFinished(false);
    }
  };

  const Item = () => {
    if (list.length > 0) {
      return list.map((item, index) => {
        return (
          <React.Router.NavLink to={"/category/info?id=" + item.id}>
          <li key={index}>
              <img src={item.image_cdn} alt="" />
              <p>{item.name}</p>
              <span>2020-03-21</span>
          </li>
          </React.Router.NavLink>
        );
      });
    }
  };

  // 封装循环的数据结构
  const SwiperItem = () => {
    if (recommendData.length > 0) {
      return (
        <>
          <React.Vant.Swiper autoplay={3000}
            indicator={(total, current) => (
              <div className="custom-indicator">
                {current + 1}/{total}
              </div>
            )}
          >
            {recommendData.map((item) => (
              <React.Vant.Swiper.Item key={item.id}>
                <React.Vant.Image lazyload src={item.image_cdn} />
              </React.Vant.Swiper.Item>
            ))}
          </React.Vant.Swiper>
        </>
      );
    } else {
      return <></>;
    }
  };

  const getRecommendData = async () => {
    let result = await React.Http.POST({
      url: "category/recommend",
      params: {},
    });

    if (result) {
      if (result.code === 1) {
        setRecommendData(result.data);
      }
    }
  };

  React.useEffect(() => {
    getRecommendData();
  }, []);

  return (
    <>
      <React.Vant.Sticky>
        <React.Vant.NavBar title="学术" leftArrow={<></>} />
      </React.Vant.Sticky>

      <div className="banner_shouy">
        <SwiperItem />
      </div>

      <div className="lest_xs">
        <React.Vant.PullRefresh onRefresh={onRefresh}>
          {/* List 组件可以与 PullRefresh 组件结合使用，实现下拉刷新的效果 */}
          <React.Vant.List finished={finished} onLoad={onLoadRefresh}>
            <ul>
              <Item />
            </ul>
          </React.Vant.List>
        </React.Vant.PullRefresh>
      </div>

      <div style={{ height: ".75rem" }}></div>

      <Footer />
    </>
  );
};

export default Index;
